<template>
    <span @click="click" class='mainspan'>
        <span v-if='showInput' >
            <div class='input-wrap'>
                <slot name='input' >
                        <Input ref='input'
                            :value='value' 
                            size='small'
                            @input='input' 
                            @on-blur='tblur' 
                            @on-enter='tblur' 
                            autofocus />   
                </slot>
            </div>
        </span>
        <span v-else-if='this.value' >
            <div class='value-wrap'>
                <slot name='value' >
                    {{value}}
                </slot>
            </div>
        </span>
        <span v-else >
            <div class='value-wrap'>
                <slot>
                    {{tempString}}
                </slot>
            </div>
        </span>
    </span>    
</template>
<script>
export default {
    name:'inputSpan',
    props:{
        value:{
            type:[String,Number,Date],
        }
    },
    data(){
        return {
            showInput :false,
            tempString:"*",
        }
    },
    methods:{
        click(){
            this.showInput = true; 
        },
        tblur(){
            this.showInput = false;
        },
        input(d){
            this.$emit('input',d);
        }
    }
}
</script>
<style lang="less" scoped>
    .mainspan {
        display: inline-block;
        line-height: 22px;
        .value-wrap {
            width: 100px;
            padding-left: 1em;
            border-bottom: 1px solid black;
            text-align: start;
        }
        .input-wrap {
            width: 100px;
        }
    }
</style>


